<template>
    <div>
        <div class="header-title">
            <span @click="$router.go(-1)" class="mint-toast-icon mintui mintui-back"></span>
            <span>交易页</span>
            <span></span>
        </div>
        <div class="header-search">
            <div class="header-search-detail" @click="$router.push({name:'orderSearch'})">
                <span class="fa fa-search"></span>
                <input type="text" placeholder="请搜索币种" />
            </div>
        </div>
        <!-- 订单列表 -->
        <div class="scroll-range">
            <mt-loadmore
                :top-method="loadTop"
                :bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded"
                :autoFill="false"
                ref="loadmore"
            >
                <div class="lists">
                    <div class="list-detail">
                        <div>
                            <span>SGSC</span>
                            <span>10000USDT</span>
                            <span>取消</span>
                        </div>
                        <div>
                            <span>时间</span>
                            <span>单价</span>
                        </div>
                        <div>
                            <span>09:49 06/26</span>
                            <span>3.7346</span>
                        </div>
                        <div>
                            <div>
                                <p>数量</p>
                                <p>10000</p>
                            </div>
                            <div>
                                <p>总额</p>
                                <p>10000</p>
                            </div>
                            <div>
                                <mt-button
                                    @click="$router.push({name:'orderDetail'})"
                                    type="primary"
                                    size="small"
                                >待确认</mt-button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 暂无订单 -->
                <bgStatus v-show="false" :bgImg="bgImg" :bgWord="bgWord"></bgStatus>
            </mt-loadmore>
        </div>
    </div>
</template>
<script>
import bgStatus from "../../components/bgStatus";
export default {
    data() {
        return {
            //加载
            allLoaded: false, //数据是否加载完毕
            pageNum: 1,
            //暂无
            bgImg: require("../../assets/img/wudingdan.png"),
            bgWord: "暂无订单"
        };
    },
    components: {
        bgStatus
    },
    methods: {
        //下拉刷新
        loadTop() {
            // 加载更多数据
            setTimeout(() => {
                this.$refs.loadmore.onTopLoaded();
            }, 1000);
        },
        //上拉加载
        loadBottom() {
            this.pageNum++;
            setTimeout(() => {
                this.$refs.loadmore.onBottomLoaded();
            }, 1000);
        }
    }
};
</script>
<style lang="less" scoped>
.header-search {
    background-color: #f7f7fb;
    height: 45px;
    padding: 9px 15px;
    .header-search-detail {
        .flexStartCenter();
        height: 100%;
        background-color: @white;
        color: @blackColor5;
        font-size: 12px;
        border-radius: 5px;
        padding: 0 15px;
        input {
            border: none;
            margin-left: 12px;
        }
    }
}
.scroll-range {
    height: 80vh;
    .lists {
        padding: 10px 15px 15px;
        .list-detail {
            font-size: 12px;
            color: @blackColor7;
            width: 100%;
            padding-bottom: 15px;
            margin-bottom: 15px;
            border-bottom: 1px solid @blackColor3;
            span {
                display: inline-block;
                width: 32%;
            }
            > div:nth-child(1) {
                margin-bottom: 12px;
                > span:nth-child(1),
                > span:nth-child(2) {
                    font-size: 20px;
                    color: @blackColor8;
                    font-weight: bold;
                }
                > span:nth-child(3) {
                    text-align: right;
                }
            }
            > div:nth-child(3) {
                margin-bottom: 12px;
            }
            > div:nth-child(4) {
                display: flex;
                > div {
                    width: 32%;
                }
                > div:nth-child(3) {
                    text-align: right;
                }
            }
        }
    }
}
</style>
